<template>
  <div>
    <a-table :columns="columns" :data-source="dataSource"> </a-table>
    <div v-for="item in dataSource" :key="item.name">
      姓名：{{ item.name }} 年龄：{{ item.age }}
      <span v-if="item.age > 100">超过100岁了</span>
    </div>

    <B />
    <C />
  </div>
</template>

<script setup lang="tsx">
import { ref } from 'vue'
const dataSource = ref([
  { name: '小明', age: 123 },
  { name: '小红', age: 1 }
])

function test() {
  return []
}
const data = {}
const res = data?.data?.data
const columns = [
  {
    title: '姓名',
    dataIndex: 'name',
    customRender({ text }) {
      return <div>姓名：{text}</div>
    }
  },
  {
    title: '方法',
    dataIndex: 'method',
    customRender({ text, record }) {
      return (
        <div>
          <button>删除</button>
        </div>
      )
    }
  }
]

const B = <div onClick={() => console.log(123123123)}>123123</div>

const C = () =>
  dataSource.value.map((item) => (
    <div>
      姓名：{item.name}年龄：{item.age}
      {item.age > 100 && <span>超过100岁了！</span>}
    </div>
  ))
</script>

<style></style>
